﻿<%@ Page Title="" Language="C#" MasterPageFile="~/AccountMaster.Master" AutoEventWireup="true"
    CodeBehind="Register.aspx.cs" Inherits="SonCa.SocialNetwork.Accounts.Register" %>
<%@ Register Assembly="Recaptcha" TagPrefix="recaptcha" Namespace="Recaptcha" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <form id="form1" runat="server">
    <script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript">        
        var successImg = "../img/check_ok.png";
        var failImg = "../img/check_fail.png";

        // Common function
        function checkOk(field) {
            document.getElementById(field + "_err_msg").style["display"] = "none";
            document.getElementById("img_check_" + field).src = successImg;
            return true;
        }

        function checkFail(field, msg) {
            document.getElementById(field + "_err_msg").style["display"] = "block";
            document.getElementById(field + "_err_msg").textContent = msg;
            document.getElementById("img_check_" + field).src = failImg;
            return false;
        }

        // Name
        function reg_lastname(textbox, when) {
            if (when == "in") {
                document.getElementById("note_name").style["display"] = "block";
                document.getElementById("note_name_msg").textContent = "Họ chỉ gồm 1 chữ";
            }
            else {
                document.getElementById("note_name").style["display"] = "none";
                validateLastname(textbox);
            }
        }

        function validateLastname(textbox) {
            var name = textbox.value;
            if (name == "") {
                document.getElementById("name_err_msg").style["display"] = "block";
                document.getElementById("name_err_msg").textContent = "Vui lòng nhập Họ";
                return false;
            }
            else if (name.split(' ').length > 1) {
                document.getElementById("name_err_msg").style["display"] = "block";
                document.getElementById("name_err_msg").textContent = "Họ chỉ gồm 1 chữ";
                return false;
            } else return true;
        }

        function reg_middlename(textbox, when) {
            if (when == "in") {
                document.getElementById("note_name").style["display"] = "block";
                document.getElementById("note_name_msg").textContent = "Tên đệm là các chữ lót trong tên";
            }
            else {
                document.getElementById("note_name").style["display"] = "none";
            }
        }

        function reg_firstname(textbox, when) {
            if (when == "in") {
                document.getElementById("note_name").style["display"] = "block";
                document.getElementById("note_name_msg").textContent = "Tên chỉ gồm 1 chữ";
            }
            else {
                document.getElementById("note_name").style["display"] = "none";
                validateFirstname(textbox);
            }
        }

        function validateFirstname(textbox) {
            var name = textbox.value;
            if (name == "") {
                document.getElementById("name_err_msg").style["display"] = "block";
                document.getElementById("name_err_msg").textContent = "Vui lòng nhập Tên";
                return false;
            }
            else if (name.split(' ').length > 1) {
                document.getElementById("name_err_msg").style["display"] = "block";
                document.getElementById("name_err_msg").textContent = "Tên chỉ gồm 1 chữ";
                return false;
            }
            else return checkOk("name");
        }

        // Username
        function reg_username(textbox, when) {
            if (when == "in") {
                document.getElementById("note_username").style["display"] = "block";
            }
            else {
                document.getElementById("note_username").style["display"] = "none";
                var msg = validateUsername(textbox);
                document.getElementById("check_status_username").style["display"] = "block";
                validateUsername(textbox);
            }
        }

        function validateUsername(textbox) {
            var name = textbox.value;
            if (name == "") return checkFail("username", "Vui lòng nhập tên đăng nhập");
            else if (name.length < 4 || name.length > 20) return checkFail("username", "Tên đăng nhập chỉ bao gồm 4-20 ký tự chữ và số");
            else CheckUsernameExist(textbox);
        }

        function CheckUsernameExist(textbox) {
            var name = textbox.value;
            var check = true;
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "../Services/AjaxService.svc/CheckUsernameInUse",
                data: '{"username": "' + name + '"}',
                dataType: "json",
                success: function (data) {
                    if (data.d == false) check = checkOk("username");
                    else check = checkFail("username", "Tên đăng nhập đã tồn tại");
                },
                error: function (msg) {
                    //alert('error');
                }
            }).done(function () {
                return check;
            });
            return true;
        }

        // Password
        function reg_password(textbox, when) {
            if (when == "in") {
                document.getElementById("note_password").style["display"] = "block";
            }
            else {
                document.getElementById("note_password").style["display"] = "none";
                var msg = validatePassword(textbox);
                document.getElementById("check_status_password").style["display"] = "block";
                validatePassword(textbox);
            }
        }

        function validatePassword(textbox) {
            var password = textbox.value;
            if (password == "") return checkFail("password", "Vui lòng nhập mật khẩu");
            else if (password.length < 6 || password.length > 50) return checkFail("password", "Mật khẩu chỉ bao gồm 6-50 ký tự");
            else return checkOk("password");
        }

        // Confirm Password
        function reg_cpassword(textbox, when) {
            if (when == "in") {
                document.getElementById("note_cpassword").style["display"] = "block";
            }
            else {
                document.getElementById("note_cpassword").style["display"] = "none";
                var msg = validateCPassword(textbox);
                document.getElementById("check_status_cpassword").style["display"] = "block";
                validateCPassword(textbox);
            }
        }

        function validateCPassword(textbox) {
            var cpass = textbox.value;
            var pass = document.getElementById("<%=txtPassword.ClientID %>").value;
            if (cpass == "") return checkFail("cpassword", "Vui lòng nhập 'Nhập lại mật khẩu'");
            else if (cpass != pass) return checkFail("cpassword", "Vui lòng nhập chính xác mật khẩu đã nhập ở trên.");
            else return checkOk("cpassword");
        }

        // Email
        function reg_email(textbox, when) {
            if (when == "in") {
                document.getElementById("note_email").style["display"] = "block";
            }
            else {
                document.getElementById("note_email").style["display"] = "none";
                var msg = validateEmail(textbox);
                document.getElementById("check_status_email").style["display"] = "block";
                validateEmail(textbox);
            }
        }

        function validateEmail(textbox) {
            var email = textbox.value;
            if (email == "") return checkFail("email", "Vui lòng nhập email");
            else if (!(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email))) return checkFail("email", "Email sai định dạng");
            else return CheckEmailExist(textbox);
        }

        function CheckEmailExist(textbox) {
            var email = textbox.value;
            var check = true;
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "../Services/AjaxService.svc/CheckEmailInUse",
                data: '{"email": "' + email + '"}',
                dataType: "json",
                success: function (data) {
                    if (data.d == true) check = checkFail("email", "Email đã được sử dụng");
                    else check = checkOk("email");
                },
                error: function (msg) {
                    //return false;
                }
            }).done(function () {
                return check;
            });
            return true;
        }

        // Gender
        function reg_gender(textbox, when) {
            if (when == "in") {
            }
            else {
                document.getElementById("check_status_gender").style["display"] = "block";
                var maleOp = document.getElementById("<%=rdMale.ClientID %>");
                var femalOp = document.getElementById("<%=rdFemale.ClientID %>");
                if (maleOp.checked || femalOp.checked) checkOk("gender");
            }
        }

        function checkGenderSubmit() {
            var maleOp = document.getElementById("<%=rdMale.ClientID %>");
            var femalOp = document.getElementById("<%=rdFemale.ClientID %>");
            document.getElementById("check_status_gender").style["display"] = "block";
            if (maleOp.checked || femalOp.checked) return checkOk("gender");
            else return checkFail("gender", "Vui lòng chọn giới tính");
        }

        // Birthdate
        function reg_birthdate(textbox, when) {
            if (when == "in") {
            }
            else {
                var birthdate = textbox.value;
                document.getElementById("check_status_birthdate").style["display"] = "block";
                if (birthdate == "") return checkFail("birthdate", "Vui lòng nhập ngày sinh");
                else return checkOk("birthdate");
            }
        }

        // validate form
        function validateForm() {
            var checkLastname = validateLastname(document.getElementById("<%=txtLastName.ClientID %>"));
            var checkFirstname = validateFirstname(document.getElementById("<%=txtFirstName.ClientID %>"));
            var checkUsername = true; // validateUsername(document.getElementById("<%=txtUsername.ClientID %>"));
            var checkPassword = validatePassword(document.getElementById("<%=txtPassword.ClientID %>"));
            var checkCPassword = validateCPassword(document.getElementById("<%=txtConfirmPassword.ClientID %>"));
            var checkEmail = true; // validateEmail(document.getElementById("<%=txtEmail.ClientID %>"));
            var checkBirthdate = true;//  reg_birthdate(document.getElementById("<%=txtBirthDate.ClientID %>"), "out");
            var checkGender = document.getElementById("<%=rdMale.ClientID %>").checked || document.getElementById("<%=rdFemale.ClientID %>").checked;

            if (checkLastname == true && checkFirstname == true && checkUsername == true && checkPassword == true && checkCPassword == true && checkEmail == true && checkBirthdate == true && checkGender == true) {
                return true;
            }
            else return false;
        }
    </script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script>
        $(function () {
            $(".datepicker").datepicker();
        });
    </script>
    <div class="head">
        <div class="star">
            <span style="color: #fff;">Cloud Karaoke</span> trên các thiết bị bắt đầu tính phí
            từ ngày <span style="color: #ff1d58;"><strong>01/03/2013</strong></span></div>
        <div class="clearer">
        </div>
        <div class="register">
            <div class="content">
                <div class="title">
                    Đăng ký ngay để trở thành thành viên của MXH Sơn Ca!</div>
                <div class="text">
                    <div class="left">
                        Họ</div>
                    <div class="right" style="width: 60px;">
                        <asp:TextBox runat="server" ID="txtLastName" CssClass="input-block-level lastname" onfocus="reg_lastname(this, 'in')"
                            onblur="reg_lastname(this, 'out')"></asp:TextBox></div>
                    <div class="left" style="width: 55px;">
                        Tên đệm</div>
                    <div class="right" style="width: 100px;">
                        <asp:TextBox runat="server" ID="txtMiddleName" CssClass="input-block-level middlename" onfocus="reg_middlename(this, 'in')"
                            onblur="reg_middlename(this, 'out')"></asp:TextBox></div>
                    <div class="left" style="width: 25px;">
                        Tên</div>
                    <div class="right" style="width: 60px;">
                        <asp:TextBox runat="server" ID="txtFirstName" CssClass="input-block-level firstname" onfocus="reg_firstname(this, 'in')"
                            onblur="reg_firstname(this, 'out')"></asp:TextBox></div>
                    <div id="check_status_name" class="img_status" style="display: none;">
                        &nbsp;&nbsp;&nbsp;
                        <img src="" alt="" id="img_check_name" /></div>
                </div>
                <div class="note" id="note_name" style="display: none;">
                    <p id="note_name_msg"></p> </div>
                <p id="name_err_msg" class="error" style="display: none;">
                </p>
                <div class="text">
                    <div class="left">
                        Tên đăng nhập</div>
                    <div class="right">
                        <asp:TextBox runat="server" ID="txtUsername" CssClass="input-block-level" onfocus="reg_username(this, 'in')"
                            onblur="reg_username(this, 'out')"></asp:TextBox></div>
                    <div id="check_status_username" class="img_status" style="display: none;">
                        &nbsp;&nbsp;&nbsp;
                        <img src="" alt="" id="img_check_username" /></div>
                </div>
                <div class="note" id="note_username" style="display: none;">
                    Tên đăng nhập gồm 4-20 ký tự chữ và số</div>
                <p id="username_err_msg" class="error" style="display: none;">
                </p>
                <div class="text">
                    <div class="left">
                        Mật khẩu</div>
                    <div class="right">
                        <asp:TextBox runat="server" ID="txtPassword" TextMode="Password" CssClass="input-block-level"
                            onfocus="reg_password(this, 'in')" onblur="reg_password(this, 'out')"></asp:TextBox></div>
                    <div id="check_status_password" class="img_status" style="display: none;">
                        &nbsp;&nbsp;&nbsp;
                        <img src="" alt="" id="img_check_password" /></div>
                </div>
                <div class="note" id="note_password" style="display: none;">
                    Độ dài từ 6-50 ký tự</div>
                <p id="password_err_msg" class="error" style="display: none;">
                </p>
                <div class="text">
                    <div class="left">
                        Nhập lại mật khẩu</div>
                    <div class="right">
                        <asp:TextBox runat="server" ID="txtConfirmPassword" TextMode="Password" CssClass="input-block-level"
                            onfocus="reg_cpassword(this, 'in')" onblur="reg_cpassword(this, 'out')"></asp:TextBox></div>
                    <div id="check_status_cpassword" class="img_status" style="display: none;">
                        &nbsp;&nbsp;&nbsp;
                        <img src="" alt="" id="img_check_cpassword" /></div>
                </div>
                <div class="note" id="note_cpassword" style="display: none;">
                    Nhập lại mật khẩu vừa nhập ở trên</div>
                <p id="cpassword_err_msg" class="error" style="display: none;">
                </p>
                <div class="text">
                    <div class="left">
                        Email</div>
                    <div class="right">
                        <asp:TextBox runat="server" ID="txtEmail" CssClass="input-block-level" onfocus="reg_email(this, 'in')"
                            onblur="reg_email(this, 'out')"></asp:TextBox></div>
                    <div id="check_status_email" class="img_status" style="display: none;">
                        &nbsp;&nbsp;&nbsp;
                        <img src="" alt="" id="img_check_email" /></div>
                </div>
                <div class="note" id="note_email" style="display: none;">
                    Nhập địa chỉ email bạn đang sử dụng</div>
                <p id="email_err_msg" class="error" style="display: none;">
                </p>
                <div class="text">
                    <div class="left">
                        Giới tính</div>
                    <div class="right">
                        <label>
                            <asp:RadioButton ID="rdMale" runat="server" GroupName="gender" onblur="reg_gender(this, 'out')" />
                            Nam
                        </label>
                        <label>
                            <asp:RadioButton ID="rdFemale" runat="server" GroupName="gender" onblur="reg_gender(this, 'out')" />
                            Nữ
                        </label>
                    </div>
                    <div id="check_status_Gender" class="img_status" style="display: none;">
                        &nbsp;&nbsp;&nbsp;
                        <img src="" alt="" id="img_check_gender" /></div>
                </div>
                <p id="gender_err_msg" class="error" style="display: none;">
                </p>
                <div class="text">
                    <div class="left">
                        Ngày sinh</div>
                    <div class="right">
                        <asp:TextBox runat="server" ID="txtBirthDate" CssClass="datepicker input-block-level"></asp:TextBox></div>
                    <div id="check_status_birthdate" class="img_status" style="display: none;">
                        &nbsp;&nbsp;&nbsp;
                        <img src="" alt="" id="img_check_birthdate" /></div>
                </div>
                <p id="birthdate_err_msg" class="error" style="display: none;">
                </p>
                <div class="text">
                    <div class="left">
                        Mã xác nhận</div>
                    <div class="right">
                        <recaptcha:RecaptchaControl
                            ID="recaptcha1"
                            runat="server"
                            PublicKey="6LctueESAAAAAMnPRn76cYhGJfTrWoyxjofeysyK"
                            PrivateKey="6LctueESAAAAAPHgiO-mGLdV1Pi_21bauEWmlOEe"
                            />
                    </div>
                </div>
                <%--<div class="text">
                    <div class="left">
                        Nhập mã xác nhận</div>
                    <div class="right">
                        <asp:TextBox runat="server" ID="txtCapcha" CssClass="input-block-level"></asp:TextBox></div>
                    <div id="check_status_capcha" class="img_status" style="display: none;">
                        &nbsp;&nbsp;&nbsp;
                        <img src="" alt="" id="img_check_capcha" /></div>
                </div>
                <div class="note" id="note_capcha">
                    (Có thể nhập mã xác nhận bằng chữ hoa và chữ thường.)</div>
                <p id="capcha_err_msg" class="error" style="display: none;">
                </p>--%>
                <div class="text" style="margin-top: 30px;">
                    <div class="left">
                        &nbsp;</div>
                    <div class="right">
                        <asp:Button runat="server" ID="btnRegister" CssClass="register_btn" Text="Đăng ký"
                            OnClientClick="return validateForm()" OnClick="btnRegister_Click"></asp:Button></div>
                </div>
            </div>
            <div class="right_content">
                <img src="../img/register_img.png" alt="" />
            </div>
            <div class="clearer">
            </div>
        </div>
    </div>
    </form>
</asp:Content>
